<template>
  <el-form :inline="true" :model="request">
    <el-form-item label="真实姓名">
      <el-input v-model="request.trueName" placeholder="请输入真实姓名" clearable></el-input>
    </el-form-item>
    <el-form-item label="账号状态">
      <el-select v-model="request.available" placeholder="请选择账号状态" clearable>
        <el-option :value="1" label="可用">可用</el-option>
        <el-option :value="2" label="冻结">冻结</el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search" icon="Search">搜索</el-button>
      <el-button type="primary" @click="add" icon="CirclePlus">新增</el-button>
      <el-button type="primary" @click="exportFile" icon="Download">导出报表</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="state.list" stripe border highlight-current-row height="calc(100% - 96px)">
    <el-table-column prop="username" label="账号" width="150"/>
    <el-table-column prop="trueName" label="真实姓名" width="120"/>
    <el-table-column prop="phone" label="手机号" width="120"/>
    <el-table-column prop="email" label="邮箱" width="200"/>
    <el-table-column prop="sexLabel" label="性别" width="80"/>
    <el-table-column prop="inductionTime" label="入职时间" width="120"/>
    <el-table-column label="状态" width="80">
      <template #default="scope">
        <el-tag :type="scope.row.available===1?'success':'danger'">{{ scope.row.statusLabel }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="roleNames" label="角色"></el-table-column>
    <el-table-column label="操作" width="230">
      <template #default="scope">
        <el-button type="warning" size="small" @click="edit(scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteUserById(scope.row)">删除</el-button>
        <el-button type="danger" size="small" @click="disableAccount(scope.row)" v-if="scope.row.available===1">
          冻结
        </el-button>
        <el-button type="success" size="small" @click="enAbleAccount(scope.row)" v-if="scope.row.available===2">
          解封
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background :total="state.total" layout="total,sizes,jumper,prev,pager,next" class="commonPage"
                 @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
  <user-info :id="state.id" v-model="state.showUserInfo" v-if="state.showUserInfo"
             @save="saveUserInfo" :title="state.title" :type="state.type"></user-info>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import { commonPostDownloadFile, post } from '@/utils/httpRequest'
import {
  queryUserList,
  disAbleAccountUrl,
  enAbleAccountUrl, deleteUserByIdUrl, exportUserUrl
} from '@/api/api'
import UserInfo from '@/views/userManage/components/userInfo'
import { ElMessageBox } from 'element-plus'

export default {
  name: 'userManage',
  setup () {
    const state = reactive({
      list: [],
      total: 0,
      id: '',
      showUserInfo: false,
      title: '',
      type: 1
    })
    const request = ref({
      trueName: null,
      available: null,
      pageSize: 10,
      pageNum: 1
    })
    const saveUserInfo = () => {
      getUserList()
    }
    const exportFile = async () => {
      await commonPostDownloadFile(exportUserUrl, request.value)
    }
    const handleSizeChange = (value) => {
      request.value.pageSize = value
      getUserList()
    }
    const deleteUserById = async (data) => {
      ElMessageBox.confirm('该用户下的信息都将被删除，确定删除该用户？', '提示', {
        type: 'warning'
      }).then(async () => {
        const result = await post(deleteUserByIdUrl, { id: data.id })
        if (result.code === 200) {
          await getUserList()
        }
      })
    }
    // 获取用户列表
    const getUserList = async () => {
      const result = await post(queryUserList, request.value)
      if (result.code === 200) {
        state.list = result.data.records
        state.total = result.data.total
      }
    }
    const search = () => {
      request.value.pageNum = 1
      request.value.pageSize = 10
      getUserList()
    }
    // 新增用户
    const add = () => {
      state.type = 1
      state.title = '新增用户'
      state.id = ''
      state.showUserInfo = true
    }
    // 编辑用户
    const edit = (data) => {
      state.type = 2
      state.title = `编辑【${data.trueName}】用户`
      state.id = data.id
      state.showUserInfo = true
    }
    const handleCurrentChange = (value) => {
      request.value.pageNum = value
      console.log(value, request.value.pageNum)
      getUserList()
    }
    const disableAccount = (data) => {
      ElMessageBox.confirm('确定冻结该账号？', '提示', {
        type: 'warning'
      }).then(async () => {
        const result = await post(disAbleAccountUrl, { id: data.id })
        if (result.code === 200) {
          await getUserList()
        }
      })
    }
    const enAbleAccount = (data) => {
      ElMessageBox.confirm('确定解封该账号？', '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      }).then(async () => {
        const result = await post(enAbleAccountUrl, { id: data.id })
        if (result.code === 200) {
          await getUserList()
        }
      })
    }
    onMounted(() => {
      getUserList()
    })
    return {
      exportFile,
      deleteUserById,
      saveUserInfo,
      state,
      handleSizeChange,
      getUserList,
      request,
      search,
      add,
      edit,
      handleCurrentChange,
      disableAccount,
      enAbleAccount
    }
  },
  components: {
    UserInfo
  }
}
</script>

<style scoped>

</style>
